var WebClient_websocket = null;     //定义网页websocket

//网页初始化加载时触发onload函数
//通过js写入控件
window.onload = function(){
    var div = document.createElement("div");
    var label_url = document.createElement("p");                //URL标签
    var url_address = document.createElement("input");          //URL地址输入框
    var confirm = document.createElement("input");              //websocket创建 确认按钮
    var receive_message = document.createElement("input");      //websocket接收消息 显示
    var send_message = document.createElement("input");         //输入websocket要发送的消息
    var send = document.createElement("input");                 //websocket发送 确认按钮

    //设置URL标签属性及显示值
    label_url.type = "text";
    label_url.innerText = "Client WebSocket URL: ";
    label_url.style.cssText = "text-aligh:center; margin:0 10px; display:inline";

    //URL地址输入框属性设置
    url_address.value = "ws://192.168.1.40:26";
    url_address.id = "ws_address_input";    

    //websocket创建 确认按钮属性设置
    confirm.type = "submit";
    confirm.value = "Open";
    confirm.style.cssText = "text-aligh:center; margin:0 10px";

    //websocket接收消息 显示框属性设置
    receive_message.type = "text";
    receive_message.id = "message frame";
    receive_message.placeholder = "Message from Qt Server";
    receive_message.style.cssText = "position: absolute; left:10px; top:35px; width:425px";

    //websocket发送消息框属性设置
    send_message.type = "text";
    send_message.id = "message to send";
    send_message.placeholder = "Message to Qt Server";
    send_message.style.cssText = "position: absolute; left:10px; top:60px; width:375px";
 
    //websocket发送 确认按钮属性设置
    send.type = "submit";
    send.value = "Send";
    send.style.cssText = "text-aligh:center; position:absolute; left:395px; top:60px";

    div.style.setProperty("z-index", 1000);
    div.style.setProperty("text-aligh", "center");

    div.appendChild(label_url);
    div.appendChild(url_address);
    div.appendChild(confirm);
    div.appendChild(receive_message);
    div.appendChild(send_message);
    div.appendChild(send);
    document.body.appendChild(div);

    //websocket创建 确认按钮的点击事件触发websocket初始化
    confirm.onclick = function(){
        initWebSocket();
    }

    //websocket发送 确认按钮的点击事件触发WebClient websocket消息发送
    send.onclick = function(){
        var data = document.getElementById("message to send").value;
        WebClient_websocket.send(data);
    }
}

//WebSocket 开启函数 将会在控制台打印开启信息及向QT server端发送开启消息
function webSocketOnOpen(){
    console.log("open websocket");

    WebClient_websocket.send("web open websocket");
}

//WebSocket 接收消息处理函数
function webSocketOnReceiveMessage(msgEvent){
    console.log("receive message from Qt server");

    var msg = msgEvent.data;
 
    var display = document.getElementById("message frame");

    display.value = msg;
}

//WebSocket 错误处理函数
function webSocketOnError(){
    console.log("websocket occur error");
}

//WebSocket 关闭函数
function webSocketOnClose(){
    console.log("close websocket");
    WebClient_websocket = null;
}

//初始化Web端 WebSocket函数
function initWebSocket(){
    if(WebClient_websocket == null){
        console.log("building websocket");
        var url = document.location.host;
        var ws_addr = document.getElementById("ws_address_input").value;
        WebClient_websocket = new WebSocket(ws_addr);
        WebClient_websocket.onopen = webSocketOnOpen;
        WebClient_websocket.onmessage = webSocketOnReceiveMessage;
        WebClient_websocket.onerror = webSocketOnError;
        WebClient_websocket.onclose = webSocketOnClose;
    }
}
